import React from 'react'
import { View, ActivityIndicator, StyleSheet, Dimensions } from 'react-native'

import { pageWidth, pageHeight } from 'src/constants'

export {
  showLoading,
  showSubmitting
}

function showLoading (payload = {}) {
  return (
    <View style={[styles.loadingContainer, payload.style]}>
      <ActivityIndicator
        animating
        color={'#378efb'}
        style={styles.loadingIndicator}
        size='small'
      />
    </View>
  )
}

function showSubmitting (payload = {}) {
  return (
    <View style={[styles.submittingContainer, payload.style]}>
      <ActivityIndicator
        animating
        color={'#378efb'}
        style={styles.submittingIndicator}
        size={'large'}
      />
    </View>
  )
}

const styles = StyleSheet.create({
  loadingContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'transparent'
  },
  loadingIndicator: {
    width: 80,
    height: 80,
    padding: 20,
    alignItems: 'center',
    justifyContent: 'center'
  },
  submittingContainer: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    alignItems: 'center',
    justifyContent: 'center'
  },
  submittingIndicator: {
    width: 100,
    height: 100,
    borderRadius: 8,
    padding: 20,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.75)'
  }
})
